<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.先引入vue.js-->
    <script src="../js/vue.js"></script>
    <!--2.引入elementui的js-->
    <script src="element-ui/lib/index.js"></script>
    <!--3.引入elemetentui样式的css-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            /*text-align: center;*/
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;

        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
           padding: 0px;

        }


    </style>

</head>
<body>
    <!--准备容器  模版-->
<div id="app">

    <!--基本框架布局容器-->
         <el-container style="height: 725px; border: 1px solid red">
             <!--侧边栏-->

        <el-aside width="200px">
            <el-menu :default-openeds="['1']"
                    class="el-menu-vertical-demo">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>学生管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" @click="checkUrl('bigdata/index.html')">系统信息</el-menu-item>
                        <el-menu-item index="1-2" @click="checkUrl('stuinfo.html')">学生信息</el-menu-item>
                        <el-menu-item index="1-3" @click="checkUrl('stuscore.html')">学生成绩</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">导航二</span>
                </el-menu-item>
            </el-menu>
        </el-aside>


             <el-container>
                 <el-header style="text-align: right; font-size: 12px">
                     <el-dropdown>
                         <i class="el-icon-setting" style="margin-right: 15px"></i>
                         <el-dropdown-menu slot="dropdown">
                             <el-dropdown-item>查看个人中心</el-dropdown-item>
                             <el-dropdown-item>设置</el-dropdown-item>
                             <el-dropdown-item>退出登录</el-dropdown-item>
                         </el-dropdown-menu>
                     </el-dropdown>
                     <span>王小虎</span>
                 </el-header>


            <!--主要内容区域-->
            <el-main>
               <!--显示固定内容-->
<!--                <el-button>555</el-button>-->

<!--                <el-table :data="tableData" height="620px">-->
<!--                    <el-table-column prop="date" label="日期" width="140">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column prop="name" label="姓名" width="120">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column prop="address" label="地址">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column prop="address" label="地址">-->
<!--                    </el-table-column>-->
<!--                    <el-table-column prop="address" label="地址">-->
<!--                    </el-table-column>-->

<!--                </el-table>-->


                <!--通常这里的内容需要根据点击的菜单来实现实现跳转  vue路由   使用内嵌框架  -->
                <iframe :src="url" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="1330px" height="663px"> </iframe>

            </el-main>
        </el-container>
    </el-container>
</div>
</body>
</html>

<script>
    new Vue({
        el:'#app',
        data(){
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return{
                tableData:Array(20).fill(item),
                url:'bigdata/index.html' //内嵌框架地址数据模型
                // url:'stuinfo.html' //内嵌框架地址数据模型
            }
        },
        methods: {
            //切换菜单的函数
            checkUrl(val){
              this.url =  val ;
            }

        }
    });

</script>
